<template>

    <div style="background-color: #fff;width:100%">
        <main class="search-page__main">
            <div>
                <div class="search-title">
                    名称中包含
                    <span class="search__word">{{searchText}}</span> 的需求
                </div>
                <div loading-insert-type="embed" loading-type="tips"
                     style="position: relative;">

                    <div class="main-container">
                        <ul class="demand_ul_list">
                            <li v-for="(item,index) in demands" :key="index" class="demands_list" @click="targetDemandUrl(item.demandId)">
                                <div class="demand_item">
                                    <div class="demand_name">{{item.demands}}</div>
                                    <span class="rmb"> RMB</span>
                                    <span class="demand_price">{{item.priceLow }} - {{item.priceHigh}}</span>
                                    <div class="project-cell__badge-wrapper">
                            <span class="credit-level-icon stage-badge project-cell__icon
                             stage-badge--label">{{item.style}}</span>
                                    </div>

                                    <div class="project-cell__info-row">
                                        <div class="project-cell__info-content">
                                            <i class="el-icon-price-tag">
                                            </i>{{item.categoryName}}
                                        </div>
                                        <div class="project-cell__info-wrapper">
                                            <div class="project-cell__info-content_date">
                                                <i class="el-icon-date"></i>
                                                {{$moment(item.closingDate).format("YYYY-MM-DD")}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="project-cell__summary-wrapper">
                                        详情摘要
                                        <div class="detail">
                                            {{item.requirements}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <!--页码-->
                <section class="stage-flex-container"
                         style="justify-content: center; align-items: stretch; align-self: auto;">
                    <div class="is-darken el-pagination is-background">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="demands.length">
                        </el-pagination>
                    </div>
                </section>
            </div>
        </main>
    </div>

</template>

<script>


    import {searchDemandsByKeyword, selectDemands} from "../../assets/api/demandsApi";
    import {selectCategories} from "../../assets/api/categoryApi";

    export default {
        data() {
            return {
                searchText: this.$route.query.searchText,
                demands: []
            }
        },
        methods: {
            searchDemand(category) {
                this.$router.push({path: '/demandCategory', query: {tag: category.categoryName}});
            },
            targetDemandUrl(value){
                this.$router.push({path:'/demandDetails',query:{id:value}})
            },showCategories() {
                selectCategories(this.data).then((res) => {
                    this.categories = res.data;
                })
            },
            showDemands() {
                selectDemands(this.data).then((res) => {
                    this.demands = res.data;
                })
            },
            searchDemands() {
                this.searchText = this.$route.query.searchText;
                searchDemandsByKeyword(this.searchText).then((res) => {
                    this.demands = res.data.data;
                })
            },
            demandDetail(demand) {
                this.$router.push({path:'/demandDetails',query: {id:demand.demandId}})
            }
        },
        watch: {
            '$route'(to, from) {
                this.searchDemands();
            }
        },
        created() {
            this.searchDemands();
        },
    }
</script>

<style scoped>
    .search-page__main {
        margin-top: 30px;
        margin-left: 12%;
        width: 1200px;
    }
    .search-title {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .search__word {
        color: #adb3fb;
        font-weight: 700;
    }
    .stage-flex-container {
        display: flex;
        width: 977px;
    }
    .project-cell__badge-wrapper {
        font-size: 0;
        min-height: 22px;
        margin-top: 20px;
        display: flex;
    }
    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }
    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .project-cell__info-content {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }
    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
    }
    a {
        color: #00a8e9;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }
    .rmb {
        color: #adadad;
        font-size: 12px;
    }
    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .main-container {
        width: 1200px;
        margin: 0 auto 0 auto;
        flex: 1;
    }
    .demand_item {
        width: 300px;
        height: 200px;
        background-color: white;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }
    .project-cell__badge-wrapper {
        font-size: 0;
        min-height: 22px;
        margin-top: 25px;
        display: flex;
        margin-left: 15px;
    }
    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }
    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .project-cell__info-content {
        margin-left: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }
    .project-cell__info-content_date {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
        margin-right: 20px;
    }

    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
        margin-left: 10px;
    }

    a{
        color: #adb3fb;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }
    .rmb {
        float: right;
        color: #adadad;
        font-size: 12px;
        margin-right: 10px;
    }

    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .demands_list {
        float: left;
        padding: 10px;
        list-style: none;
        border-radius: 10px;
        cursor: pointer;
    }

    .demand_ul_list {
        position: relative;
    }

    .demand_name {
        font-weight: bold;
        position: relative;
        top: 20px;
        left: 20px;
    }

    .demand_price {
        float: right;
        margin-right: 5px;
        font-weight: bold;
        color: cornflowerblue;
    }
</style>
